<script setup>
import { ref } from "vue";
import TreeChart from "./components/TreeChart.vue";
const treeData = ref({
  task: "根据用户问题：上一轮对话中用户的任务为:查询武汉最近三天天气，并输出到markdown文档中, 任务的结果为:结果汇总：\n任务1:访问中国天气网并查询武汉2025年5月12日至5月14日的天气情况，包括温度、湿度、风速等信息，执行结果:失败，原因是FLOW-NODE-QUERY-ZHONGGUOTIANQI-GOODS智能体组未运行，无法调度执行；任务2:将从中国天气网获取的武汉天气信息整理成Markdown格式，并保存为文档，执行结果:未执行，依赖任务1未完成；任务3:将已有的Markdown文档转换为PDF格式，确保天气信息清晰可见，执行结果:未执行，依赖任务2未完成。 \n本次用户的任务为:用Markdown写一份会议纪要模板，包含日期、参会人员、讨论要点（无序列表）和行动项（任务列表），进行任务分配、汇总",
  children: [
    {
      task: '创建一个Markdown文件，内容包含会议纪要模板，具体格式如下：">"># 会议纪要 ">">">日期：2025-05-12 ">">">参会人员：（此处列出参会人员名单） ">">">讨论要点：">">">- 讨论点1 ">">">- 讨论点2 ">">">... ">">">行动项：">">">1. 行动项1 - 负责人 ">">">2. 行动项2 - 负责人 ">">">..."',
      name: "PythonAgentGroup",
      value: 100,
    },
    {
      task: '创建一个Markdown文件，内容包含会议纪要模板，具体格式如下：">"># 会议纪要 ">">">日期：2025-05-12 ">">">参会人员：（此处列出参会人员名单） ">">">讨论要点：">">">- 讨论点1 ">">">- 讨论点2 ">">">... ">">">行动项：">">">1. 行动项1 - 负责人 ">">">2. 行动项2 - 负责人 ">">">..."',
      name: "PythonAgentGroup",
      value: 100,
    },
    {
      task: '创建一个Markdown文件，内容包含会议纪要模板，具体格式如下：">"># 会议纪要 ">">">日期：2025-05-12 ">">">参会人员：（此处列出参会人员名单） ">">">讨论要点：">">">- 讨论点1 ">">">- 讨论点2 ">">">... ">">">行动项：">">">1. 行动项1 - 负责人 ">">">2. 行动项2 - 负责人 ">">">..."',
      name: "PythonAgentGroup",
      value: 100,
    },
    {
      task: '创建一个Markdown文件，内容包含会议纪要模板，具体格式如下：">"># 会议纪要 ">">">日期：2025-05-12 ">">">参会人员：（此处列出参会人员名单） ">">">讨论要点：">">">- 讨论点1 ">">">- 讨论点2 ">">">... ">">">行动项：">">">1. 行动项1 - 负责人 ">">">2. 行动项2 - 负责人 ">">">..."',
      name: "PythonAgentGroup",
      value: 100,
    },
    {
      task: '创建一个Markdown文件，内容包含会议纪要模板，具体格式如下：">"># 会议纪要 ">">">日期：2025-05-12 ">">">参会人员：（此处列出参会人员名单） ">">">讨论要点：">">">- 讨论点1 ">">">- 讨论点2 ">">">... ">">">行动项：">">">1. 行动项1 - 负责人 ">">">2. 行动项2 - 负责人 ">">">..."',
      name: "PythonAgentGroup",
      value: 100,
    },
  ],
  name: "核心智能体:AgentNetworkPlannerGroup/AgentNetworkPlanner",
});
// const treeData = ref({
//   id: 1,
//   name: "根节点",
//   children: [
//     {
//       id: 2,
//       name: "子节点1",
//       children: [
//         { id: 4, name: "孙节点1" },
//         { id: 5, name: "孙节点2" },
//       ],
//     },
//     {
//       id: 3,
//       name: "子节点2",
//     },
//     {
//       id: 7,
//       name: "子节点5",
//     },
//     {
//       id: 9,
//       name: "子节点5",
//     },
//   ],
// });
</script>

<template>
  <div class="app-container">
    <TreeChart :data="treeData" />
  </div>
</template>

<style>
.app-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

h1 {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 4px;
}
</style>
